<template>
  <div class="text-wrapper">
    <div class="text part1">
       <span :class="['letter', {poofed: !letter.alive}]" v-for="(letter, index) in text" :key="index"
             @click="$emit('poof', letter.char)"
       >
      <div class="character">{{ letter.char }}</div>
      <span></span>
    </span>
    </div>

  </div>
</template>

<script>
export default {
  props: ["text"],
  name: "animWord",
  mounted() {
  }
}
</script>

<style scoped>

.text-wrapper {
  height: 1rem;
  width: 100%;
}
.text .letter {
  position: relative;
  display: inline-block;
  -webkit-transition: all .4s;
  transition: all .4s;
}
.text .letter .character {
  -webkit-transition: color .4s;
  transition: color .4s;
  cursor: pointer;
}
.text .letter span {
  position: absolute;
  bottom: .8rem;
  left: .4rem;
  display: block;
  width: 100%;
  height: 15px;
}
.text.part1 .letter:nth-child(odd).poofed {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: poofing1 3s ease-in-out infinite alternate;
  animation: poofing1 3s ease-in-out infinite alternate;
}

@-webkit-keyframes poofing1 {
  0% {
    -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
    transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
  }
  50% {
    -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
    transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
  }
  56% {
    -webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
    transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
  }
  100% {
    -webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
    transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
  }
}
@keyframes poofing1 {
  0% {
    -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
    transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
  }
  50% {
    -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
    transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
  }
  56% {
    -webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
    transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
  }
  100% {
    -webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
    transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
  }
}
.text.part1 .letter:nth-child(odd) .character {
  -webkit-animation: wave 3s linear infinite;
  animation: wave 3s linear infinite;
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}


.text.part1 .letter:nth-child(even).poofed {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: poofing2 3s ease-in-out infinite alternate;
  animation: poofing2 3s ease-in-out infinite alternate;
}
@-webkit-keyframes poofing2 {
  0% {
    -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
    transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
  }
  50% {
    -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
    transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
  }
  56% {
    -webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
    transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
  }
  100% {
    -webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
    transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
  }
}
@keyframes poofing2 {
  0% {
    -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
    transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
  }
  50% {
    -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
    transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
  }
  56% {
    -webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
    transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
  }
  100% {
    -webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
    transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
  }
}
.text.part1 .letter:nth-child(even) .character {
  -webkit-animation: wave 3s linear infinite;
  animation: wave 3s linear infinite;
  -webkit-animation-delay: 0.66667s;
  animation-delay: 0.66667s;
}


@-webkit-keyframes wave {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes wave {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

</style>
